<template>
    <view class="content">
        <!-- <view class="u-p-l-30 u-p-r-30">
            <swiper style="height: 140rpx;" :indicator-dots="false" @change="navChange">
                <swiper-item class="swiper" v-for="(nitem, nindex) in 3" :key="nindex">
                    <view class="nav-item" v-for="(item,index) in 5" :key="index" @click="toList(item, nitem)">
                        <image src="../../static/del/28.png" class="nav-img"></image>
                        <view class="nav-name">家庭教育</view>
                    </view>
                </swiper-item>
            </swiper>
            <view class="nav-line">
                <view class="nav-line-center-bg" :style="{width: 10 * 3 + 'rpx'}" 
                    :class="{ navLineCenterBgActive: changeIndex == index }" 
                    v-for="(item, index) in 3" :key="index"></view>
            </view>
        </view> -->
        <!-- type= 1活动 2艺术班 3实时计划全部 4实时计划我的 -->
        <view class="rank u-p-l-30 u-p-r-30 u-p-b-20">
            <scroll-view scroll-x>
                <view class="rank-i">
                    <view class="nav-item" v-for="(item,index) in data.activity_type" :key="index" 
                        @click="toPage(`/pages/classroom/classroom?type=1&id=${item.id}`)">
                        <image :src="item.image" class="nav-img"></image>
                        <view class="nav-name">{{item.name}}</view>
                    </view>
                </view>
            </scroll-view>
        </view>
        
        <view class="swiper-box">
            <u-swiper :list="data.rotation_image" height="198" interval="5000" duration="700" border-radius="15" indicator-pos="bottomCenter"
                @click="toGuangGao($event, data.rotation_image)"></u-swiper>
        </view>
        
        <view v-if="data.art_class && data.art_class.length > 0">
            <view class="title" @click="toPage(`/pages/classroom/classroom?type=2`)">
                <view>艺术斑推荐</view>
                <view class="more">更多</view>
            </view>
            <view class="box">
                <view class="item" v-for="(item, index) in data.art_class" :key="index"
                    @click="openPage(item)">
                    <image :src="item.image" class="item-img"></image>
                    <view>
                        <view class="name">{{item.title}}</view>
                        <view class="sub">{{item.describes}}</view>
                    </view>
                </view>
            </view>
        </view>
        
        <view v-if="data.service_staff && data.service_staff.length > 0">
            <view class="title" @click="toPage(`/pages/rank/rank`)">
                <view>优秀伙伴推荐</view>
                <view class="more">更多</view>
            </view>
            <view class="rank">
                <scroll-view scroll-x>
                    <view class="rank-i">
                        <view class="rank-i2" v-for="(item, index) in data.service_staff" :key="index" 
                            :class="{Active1 : index == 0, Active2 : index == 1, Active3 : index == 2}">
                            <view class="rank-num">
                                <image src="../../static/image/img_01.png" class="img-01" v-if="index == 0"></image>
                                <image src="../../static/image/img_02.png" class="img-01" v-else-if="index == 1"></image>
                                <image src="../../static/image/img_03.png" class="img-01" v-else-if="index == 2"></image>
                                <view class="img-num" v-else>{{ index + 1 }}</view>
                            </view>
                            <image :src="item.image" class="rank-img"></image>
                            <view class="rank-name">{{item.name}}</view>
                            <view class="rank-sub">
                                <view class="real">已实名</view>
                                <u-icon name="star-fill" color="#fec427" size="28"></u-icon>
                                <view class="star-num">{{item.star}}</view>
                            </view>
                            <view class="great">擅长：{{item.be_good_at}}</view>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </view>
        
        <view v-if="data.realtime_online && data.realtime_online.length > 0">
            <view class="title" @click="toPage(`/pages/online-order/online-order`)">
                <view>实时在线订单</view>
                <view class="more">更多</view>
            </view>
            <view class="box">
                <view class="item" v-for="(item, index) in data.realtime_online" :key="index"
                    @click="toPage(`/pages/online-order/online-details?id=${item.id}`)">
                    <image :src="item.image" class="item-img"></image>
                    <view>
                        <view class="name">{{item.title}}</view>
                        <view class="sub">{{item.describes}}</view>
                        <view class="time">{{item.date}}</view>
                    </view>
                </view>
            </view>
        </view>
        
        <!-- 底部导航 -->
        <u-tabbar v-model="current" :list="tab_list" active-color="#f29700" :border-top="false" height="120" @change="tabbarChange"></u-tabbar>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                current: 0, //底部导航索引
                tab_list: [
                    {
                        iconPath: "/static/icon/tab.png",
                        selectedIconPath: "/static/icon/tab.png",
                        text: '',
                        pagePath: "/pages/tabbar/index",
                        customIcon: false
                    },{
                        iconPath: "/static/icon/tab_01.png",
                        selectedIconPath: "/static/icon/tab_02.png",
                        text: '订单',
                        customIcon: false,
                        pagePath: "/pages/tabbar/order"
                    },{
                        iconPath: "/static/icon/tab_03.png",
                        selectedIconPath: "/static/icon/tab_04.png",
                        text: '活动',
                        customIcon: false,
                        pagePath: "/pages/tabbar/activity"
                    },{
                        iconPath: "/static/icon/tab_05.png",
                        selectedIconPath: "/static/icon/tab_06.png",
                        text: '我的',
                        customIcon: false,
                        pagePath: "/pages/tabbar/mine"
                    }
                ],
                
                changeIndex: 0,
                data: {},
            };
        },
        onShow() {
            this.getActivity()
        },
        methods: {
            openPage(item) {
                if (!this.$getSync('userToken')) {
                    this.$gTo(`/pages/login/login`)
                } else {
                    // item.type 1图文 2链接
                    if (item.type == 1) {
                        this.$gTo(`/pages/classroom/classroom-details?id=${item.id}`)
                    } else if (item.type == 2) {
                        uni.navigateToMiniProgram({
                            appId: item.link,
                        })
                    }
                }
            },
            
            toPage(url) {
                if (!this.$getSync('userToken')) {
                    this.$gTo(`/pages/login/login`)
                } else {
                    this.$gTo(url)
                }
            },
            
            getActivity(){
            	this.$ajax('activity', {
            		user_token: this.$getSync('userToken'),
            		city_id: this.$getSync('CITY_ID'),
            	}).then(ret => {
            		if (ret.success == 1000) {
            			this.data = ret.detail;
            		} else {
            			this.$toast(ret.msg);
            		}
            	});
            },
            
            // 轮播图跳转
            toGuangGao(e, array) {
                if (!uni.getStorageSync('userToken')) {
                    this.$gTo('/pages/login/login')
                } else {
                    console.log(array[e].link_id)
                    if (array[e].link_id) {
                        
                    }
                }
            },
            
            navChange(e) {
                console.log(e.detail)
                this.changeIndex = e.detail.current;
            },
            
            //切换底部导航
            tabbarChange(e) {
            	this.current = e;
            },
        }
    };
</script>

<style>
    .u-tabbar__content__item .u-icon__img {
    	width: 50rpx !important;
    	height: 50rpx !important;
    }
    .u-tabbar__content>.u-tabbar__content__item:first-child .u-icon__img{
        width: 100rpx !important;
        height: 100rpx !important;
    }
</style>

<style lang="scss">
    
    .content{
        padding: 30rpx 0 50rpx;
        background: linear-gradient(180deg, #fff,#f7f9fb,#f5f7fa);
    }
    
    .swiper{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
    }
    .nav-item{
        width: calc(690rpx / 5);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .nav-name{
        font-size: 24rpx;
        text-align: center;
        width: calc(690rpx / 5);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .nav-img {
        width: 96rpx;
        height: 96rpx;
        margin-bottom: 15rpx;
    }
    // .nActive{
    //     width: 96rpx;
    //     height: 96rpx;
    //     margin-bottom: 5rpx;
    // }
    .nav-line {
        display: flex;
        justify-content: center;
        margin: 0 auto;
        margin-top: 30rpx;
        overflow: hidden;
        position: relative;
        
        .nav-line-center-bg {
            height: 7rpx;
            background: #f3f3f3;
            border-radius: 30rpx;
        }
        
        .navLineCenterBgActive {
            width: 10rpx;
            background: #ffcc32;
            border-radius: 30rpx;
            position: relative;
            z-index: 1;
        }
    }
    
    .swiper-box{
        padding: 25rpx 30rpx 0;
    }
    
    .title{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 36rpx;
        font-weight: bold;
        padding: 45rpx 30rpx 25rpx;
    }
    .more{
        font-size: 25rpx;
        font-weight: normal;
    }
    
    .box{
        margin: 0 30rpx;
        padding: 15rpx 25rpx;
        background-color: #fff;
        border-radius: 15rpx;
        box-shadow: 2px 2px 5px #e9edf4;
    }
    .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15rpx 0;
    }
    .item-img{
        width: 165rpx;
        height: 165rpx;
        border-radius: 10rpx;
        margin-right: 20rpx;
    }
    .name{
        width: 450rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 32rpx;
        font-weight: bold;
        padding-bottom: 20rpx;
    }
    .sub{
        font-size: 24rpx;
        color: #949494;
        line-height: 35rpx;
        width: 450rpx;
        height: 70rpx;
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .time{
        font-size: 24rpx;
        color: #949494;
    }
    
    
    .rank{
        width: 100%;
        white-space: nowrap;
        padding-bottom: 10rpx;
    }
    .rank-i{
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
    }
    .rank-i2{
        width: 290rpx;
        // height: 375rpx;
        margin: 0 12rpx;
        padding: 30rpx;
        background: #fff;
        border: 2rpx solid #fff;
        box-shadow: 2px 2px 5px #e9edf4;
        box-sizing: border-box;
        border-radius: 15rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    .Active1{
        background: linear-gradient(160deg, #ffefd3, #fffcf8, #ffffff);
    }
    .Active2{
        background: linear-gradient(160deg, #e9f3ff, #fbfdff, #ffffff);
    }
    .Active3{
        background: linear-gradient(160deg, #ffe5df, #fff8f7, #ffffff);
    }
    .rank-i2:first-child{
        margin-left: 30rpx;
    }
    .rank-i2:last-child{
        margin-right: 30rpx;
    }
    .rank-num{
        position: absolute;
        left: 10rpx;
        top: 20rpx;
        z-index: 1;
    }
    .img-01{
        width: 69rpx;
        height: 48rpx;
    }
    .img-num{
        font-size: 30rpx;
        font-weight: bold;
        font-style:italic;
        padding-left: 15rpx;
    }
    .rank-img{
        width: 132rpx;
        height: 132rpx;
        border: 2rpx solid #fff;
        border-radius: 50%;
        margin-bottom: 10rpx;
    }
    .rank-name{
        width: 260rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 30rpx;
        font-weight: bold;
        text-align: center;
        padding-bottom: 5rpx;
    }
    .rank-sub{
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 10rpx;
    }
    .real{
        padding: 7rpx 8rpx;
        background-color: #000;
        border-radius: 6rpx;
        font-size: 20rpx;
        color: #feeca8;
        line-height: 1;
        margin-right: 10rpx;
    }
    .star-num{
        font-size: 28rpx;
        font-weight: bold;
        padding-left: 6rpx;
    }
    .great{
        font-size: 24rpx;
        color: #949494;
        line-height: 35rpx;
        text-align: center;
        width: 260rpx;
        height: 70rpx;
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-break: break-all;
        white-space: pre-line;
    }

</style>
